<template>
	<view>
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed>
			收藏列表
		</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="search-conten">
			<content-list ref="contentList" :dataList='content' @refreshContent="refresh" :canSwipe="true" :swipeOptions="swipeOptions" :type="type"></content-list>
			<tn-load-more class="load-more" :status="loadStatus" loadingIconType="flower"></tn-load-more>
			<tn-empty style="position: fixed;left: 50%; transform: translateX(-50%);top:40%" mode="list" v-if="content.length == 0"></tn-empty>
		</view>
	</view>
</template>

<script>
	import {getContentsByUser} from '@/util/index.js'
	export default {
		data() {
			return {
				title:'',
				page:1,
				limit:20,
				content: [],
				loadStatus: 'loading', // 加载状态：more|loading|noMore
				swipeOptions:[
					// {
					// 	text: '取消收藏',
					// 	style: {
					// 		backgroundColor: '#FFA726'
					// 	}
					// },
					{
						name: '取消收藏',
						action: 'del',
						style: {
							bgColor: '#FFA726',
							width:'150rpx'
						}
					}
				],
				type:'collect'
			};
		},
		onLoad() {
			this.getList()
		},
		methods:{
			getList(){
				getContentsByUser({page:this.page,limit:this.limit,selectType:'1'}).then((res)=>{
					this.content = this.content.concat(res.list)
					if (this.content.length < res.total) {
						this.loadStatus = 'loading'
					} else {
						this.loadStatus = 'noMore'
					}
					uni.stopPullDownRefresh();
				}).error(()=>{
					uni.stopPullDownRefresh();
				})
			},
			refresh(){
				this.page = 1
				this.content = []
				this.getList()
			}
			
		},
		//下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.content = []
			this.getList()
		},
		//上拉加载更多
		onReachBottom() {
			if(this.loadStatus == 'noMore') return
			this.page++;
			this.getList();
		},
	}
</script>

<style lang="less">
	.search-conten{
		
	}
	.search-box {
		display: flex;
		width: 100%;
		align-items: center;
		padding: 20rpx 20rpx;
		position: fixed;
		background-color: #FFFFFF;
		.search-input {
			padding: 0 40rpx;
			font-size: 34rpx;
			flex: 1;
			background-color: #eeeeee;
			border-radius: 40rpx;
			margin-right: 20rpx;
		}

		.search-btn {
			background-color: #FFFFFF;
			width: 150rpx;
			text-align: center;
			height: 70rpx;
			line-height: 70rpx;
			background-color: #01BEFF;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}
	.load-more {
		padding: 20rpx;
	}
</style>
